<template>
	<view class="page">
		<view class="nav_bar">
			<uni-nav-bar color="#333" left-icon="left" title="商品管理" :border='false' :fixed="true"
				background-color="transparent" @clickLeft="$util.back()"></uni-nav-bar>
		</view>

		<view class="nav_box"></view>

		<view class="tab">
			<u-tabs :list="tabList" @click="onTab" lineColor="#FD2A53" :activeStyle="{color: '#FD2A53',fontWeight: 500}"
				:itemStyle="{
				height: '74rpx',
				width: '50%'
			}"></u-tabs>
		</view>

		<view class="container">
			
			<view class="empty" v-if="!list.length">
				<empty></empty>
			</view>
			
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="product-content flex_center">
					<view class="image">
						<image :src="$util.getAvatar(item.goods_image)" mode="aspectFill"></image>
					</view>
					<view class="text-content">
						<view class="product-name flex_center">
							<view class="product-name-text hidden">{{ item.name }}</view>
							<view class="product-name-tags">
								{{ item.tab_nav_name }}
							</view>
						</view>
						
						<view class="product-profile hidden_3">
							{{ item.profile }}
						</view>
						
						<view class="product-num flex_center">
							<view class="product-price">￥{{ item.price }}</view>
							<view class="product-order">销量 {{ item.order_num || 0 }}</view>
							<view class="product-order">库存 {{ item.stock || '售空' }}</view>
							<!-- <view class="product-order">评价 980</view> -->
						</view>
						
					</view>
				</view>
			
				<view class="product-btn flex_center">
					<view class="btn flex_r_around" @click="toAdd(item)">
						<text>编辑</text>
					</view>
					<view class="btn flex_r_around" @click="setGoodsStatus(item)">
						<text>{{ item.is_show == 2 ? '上架' : '下架' }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<button @click="toAdd">添加商品</button>

	</view>
</template>

<script>
	import empty from '@/compentents/empty/empty.vue';
	export default {
		components: {
			empty
		},
		data() {
			return {
				tabList: [
					{
						name: '售卖中',
						is_show: 1,
					},
					{
						name: '已下架',
						is_show: 2,
					},
				],

				store: {},

				list: [],
				page: 1,
				total: 1,
				tab_nav_id: 0,
				is_show: 1,
			}
		},
		methods: {
			onTab(e) {
				this.is_show = e.is_show;
				this.refreshList();
			},

			getList() {
				this.$get('/store_goods/getStoreGoodsList', {
					store_id: this.store.id,
					page: this.page,
					tab_nav_id: this.tab_nav_id,
					is_show: this.is_show,
				},true,()=>{
					uni.stopPullDownRefresh();
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
					uni.stopPullDownRefresh();
				})
			},
			
			refreshList(){
				this.list = [];
				this.page = 1;
				this.total = 1;
				this.getList();
			},
			
			toAdd(data){
				if(data.id){
					this.$util.toUrl(`/pages/newstore/product-add?id=${data.id}`);
				}else {
					this.$util.toUrl('/pages/newstore/product-add');
				}
			},
			
			setGoodsStatus(item){
				this.$post('/store_goods/setGoodsStatus',{
					goods_id: item.id
				}).then(res=>{
					this.$util.msg(res.msg);
					this.refreshList();
				})
			},
		},

		onLoad(option) {
			this.store = uni.getStorageSync('store');
		},
		
		onShow() {
			this.refreshList();
		},
		
		onPullDownRefresh() {
			this.refreshList();
		},
		
		onReachBottom() {
			if(this.total > this.list.length){
				this.page++;
				this.getList();
			}
		}
	}
</script>

<style lang="less" scoped>
	.page {
		padding: 74rpx 24rpx 130rpx;
	}

	.nav_bar {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/newstore/new_store_background.png) 0 0 no-repeat;
		background-size: 100%;

		/deep/ .uni-nav-bar-right-text {
			font-weight: 500;
			font-size: 30rpx;
			color: #FD2A53 !important;
		}
	}

	.tab {
		width: 100vw;
		height: 72rpx;
		position: fixed;
		top: calc(44px + var(--paging-head-top));
		left: 0;
		background: #FFF;
		overflow: hidden;
		z-index: 10;
	}

	.container {
		overflow: hidden;
		.item {
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 24rpx 32rpx 32rpx;
			margin-top: 24rpx;
			overflow: hidden;

			.product-content {
				
				align-items: flex-start;
				
				.image {
					width: 128rpx;
					height: 128rpx;
					background: #D8D8D8;
					border-radius: 16rpx;
					overflow: hidden;
					flex-shrink: 0;
					margin-right: 28rpx;

					image {
						width: 128rpx;
						height: 128rpx;
					}
				}
			
				.text-content {
					flex: 1;
					overflow: hidden;
					.product-name {
						overflow: hidden;
						.product-name-text {
							flex: 1;
							font-weight: 500;
							font-size: 28rpx;
							color: #333333;
						}
						
						.product-name-tags {
							height: 40rpx;
							background: #FFEAEE;
							border-radius: 12rpx;
							border: 2rpx solid #FEDDE3;
							font-weight: 500;
							font-size: 24rpx;
							color: #FD2A53;
							padding: 0 16rpx;
						}
					}
				
					.product-profile {
						font-size: 24rpx;
						color: #999999;
						line-height: 34rpx;
						margin: 8rpx 0 12rpx;
					}
					
					.product-num {
						.product-price {
							font-weight: 500;
							font-size: 24rpx;
							color: #FD2A53;
							line-height: 34rpx;
						}
						
						.product-order {
							font-size: 24rpx;
							color: #999999;
							line-height: 34rpx;
							margin-left: 18rpx;
						}
					}
				
				}
			
			}
		
			.product-btn {
				flex-direction: row-reverse;
				margin-top: 24rpx;
				.btn {
					width: 128rpx;
					height: 48rpx;
					border-radius: 24rpx;
					border: 2rpx solid #CCCCCC;
					margin-left: 16rpx;
					
					text {
						font-size: 28rpx;
						color: #131313;
					}
				}
			}
		
		}
	}
	
	button {
		width: 320rpx;
		height: 88rpx;
		background: #FD2A53;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(253,42,83,0.8);
		border-radius: 48rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 88rpx;
		position: fixed;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
	}
	
</style>